{extend name="property/public/insidePageBase" /}
{block name="title"}添加房源{/block}
{block name="css"}
{__block__}
<style>
    body{ margin:0; }
    .layui-iconpicker-body.layui-iconpicker-body-page .hide {display: none;}
    body .layui-iconpicker .layui-iconpicker-icon-item{ width: 20.1%; }
    body{  background-color: #ffffff; }
    .layui-upload-img-box { float:left;  margin-bottom: 2px;margin-right: 2px; background: #e0e0e0;  padding: 1px; }
    .layui-upload-img {width: 82px; height: 82px; margin-bottom: 1px;}
</style>
{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">空置房间</label>
                <div class="layui-input-block">
                    <select name="source_id" lay-filter="source_id" lay-search>
                        <option value="">--请选择--</option>
                        {foreach $roomData as $v}
                        <option value="{$v['id']}" >{$v['name']}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs8">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">房源标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="housing_title" placeholder="一个好标题会吸引更多好流量(10-25个字)" class="layui-input" lay-verify="required" autocomplete="off"/>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix indispensable">租金&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        <input type="text" name="rent_price" placeholder="请输入"  class="layui-input">
                        <select name="rent_type" lay-filter="rent_type" lay-search>
                            <option value="1" >元/㎡/天</option>
                            <option value="2" >元/月</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs5">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix indispensable">&nbsp;&nbsp;&nbsp;&nbsp;房间面积&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            <input type="number" name="room_size" placeholder="请输入"  class="layui-input">
                            <div class="layui-input-split layui-input-suffix">㎡</div>
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix">第</div>
                            <input type="number" name="floor_name" oninput="if(value>100)value=100"  placeholder="请输入"  class="layui-input">
                            <div class="layui-input-split layui-input-suffix">层 共</div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-input-group">
                            <input type="number" name="floor_total" oninput="if(value>100)value=100" placeholder="请输入"  class="layui-input">
                            <div class="layui-input-split layui-input-suffix">层</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs5">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix indispensable">&nbsp;&nbsp;&nbsp;&nbsp;支付方式&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            <div class="layui-input-split layui-input-suffix">付</div>
                            <input type="number" name="pay_num" oninput="if(value>100)value=100" placeholder="请输入"  class="layui-input">
                            <div class="layui-input-split layui-input-suffix">月</div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-suffix">押</div>
                            <input type="number" name="bet_num" oninput="if(value>100)value=100" placeholder="请输入"  class="layui-input">
                            <div class="layui-input-split layui-input-suffix">月</div>
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix indispensable">起租期&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            <input type="number" name="start_rent" oninput="if(value>100)value=100" placeholder="请输入"  class="layui-input">
                            <div class="layui-input-split layui-input-suffix">月</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs4">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">房源分类</label>
                        <div class="layui-input-block">
                            <select name="cate_id" lay-filter="cate_id" lay-search>
                                <option value="">--请选择--</option>
                                {foreach $cateData as $v}
                                <option value="{$v['id']}">{$v['name']}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs4" >
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">营业执照</label>
                        <div class="layui-input-block">
                            <select name="is_reg" lay-filter="is_reg" lay-search>
                                <option value="">--请选择--</option>
                                <option value="1">可注册</option>
                                <option value="2">否</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs4" >
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix indispensable">免租期&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        <input type="number" name="free_rent" oninput="if(value>100)value=100" placeholder="请输入"  class="layui-input">
                        <div class="layui-input-split layui-input-suffix">月</div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs10">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">所在区域</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" id="address" placeholder="请输入所属地址" class="layui-input" autocomplete="off"/>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs2">
                    <button class="layui-btn layui-btn-primary layui-border" type="button" id="map_location"><i class="layui-icon layui-icon-location"></i>定位选择</button>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs10">
                    <div class="layui-form-item">
                        <label class="layui-form-label">房源标签</label>
                        <div class="layui-input-block">
                            <input type="text" name="label_id" id="label" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs2">
                    <button type="button" class="layui-btn layui-btn-primary layui-border addHousingLabel"> 添加新标签 </button>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">房间设施</label>
                <table class="layui-table">
                    <colgroup>
                        <col width="40">
                        <col>
                        <col width="100">
                        <col width="40">
                        <col>
                        <col width="100">
                    </colgroup>
                    <thead>
                    <tr>
                        <th></th>
                        <th>设施名称</th>
                        <th>设施数量</th>
                        {if isset($facilitData[0]) && count($facilitData[0]) > 1}
                        <th></th>
                        <th>设施名称</th>
                        <th>设施数量</th>
                        {/if}
                    </tr>
                    </thead>
                    <tbody>
                    {foreach $facilitData as $k2=>$v2}
                    <tr>
                        {foreach $v2 as $k=>$v}
                        <td><input type="checkbox" name="facilit[{$v['id']}][selected]" lay-skin="primary" lay-filter="facilities" value="{$v['id']}" /></td>
                        <td><img src="{$v['picture']}" style="height: 30px;width: 30px;" >{$v['facility_name']}</td>
                        <td><input type="number" name="facilit[{$v['id']}][num]" min="0" value="0" placeholder="设施数量" class="layui-input" /></td>
                        {/foreach}
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房源图片</label>
                <div class="layui-input-block" id="image_info">
                    <button type="button" class="layui-btn layui-btn-primary layui-border" id="upload_imgs" lay-data="{field: 'picture',data:{dir:'housing/picture', field:'picture'}}">上传图片</button>
                    <div class="layui-upload-list" id="img_show"> </div>
                    <div style="clear: both"></div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">详细介绍</label>
                <div class="layui-input-block">
                    <textarea placeholder="填写房屋简介，有助于快速出租"  name="remark" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item layui-hide">
                <input type="hidden" name="longitude" id="longitude" />
                <input type="hidden" name="latitude" id="latitude" />
                <button type="button" class="layui-btn layui-btn-primary replaceUploadImg toggleUpload" lay-data="{}"></button>
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'layer','laytpl', 'layCascader'], function () {
        var form = layui.form,layer = layui.layer,  $ = layui.$,laytpl = layui.laytpl, layCascader = layui.layCascader;
        let labelCase = layCascader({
            elem: '#label',
            options: {:json_encode($labelData,JSON_UNESCAPED_UNICODE)},
            props: {
                multiple: true
            }
        });

        $('#upload_imgs').selectImages({
            confirm:function(res,elem) {
                for(var i in res) {
                    index = (new Date()).getTime()+''+i;
                    $('#img_show').append('<div class="layui-upload-img-box" id="'+index+'">' +
                        '<img src="' + res[i].src + '" class="layui-upload-img checkPictureByImg">' +
                        '<input type="hidden" name="picture[]" value="' + res[i].src + '">' +
                        '<p>' +
                        '<a class="layui-btn layui-btn-xs cftoggleUpload" style="float: left" lay-data="{field: \'picture\',data:{dir:\'room/picture\', field:\'picture\', replace_upload_index: \''+index+'\'}}">修改</a>' +
                        '<a class="layui-btn layui-btn-xs layui-btn-danger" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);" style="float: right">删除</a>' +
                        '</p>' +
                        '</div>'
                    );
                }
            }
        });
        $(document).on('click', '.cftoggleUpload', function () {
            $('.toggleUpload').attr('lay-data', $(this).attr('lay-data'));
            $('.toggleUpload').trigger('click');
        });
        $('.replaceUploadImg').selectImages({
            confirm:function(res,elem,data) {
                let replaceUploadObj = $('#'+data.data.replace_upload_index);
                replaceUploadObj.find('img').attr('src', res[0].src);
                replaceUploadObj.find('img').attr('alt', res[0].src);
                replaceUploadObj.find('input').val(res[0].src);
            }
        });

        $('#map_location').on('click', function() {
            parent.layer.open({
                type: 2,
                title: '定位',
                content: "/static/maplocation/index.html",
                area: ['500px', '500px'],
                btn: ['确认','取消'],
                yes: function(index, layero){
                    choseeArea = parent.window.frames['layui-layer-iframe'+index].choseeArea;
                    if(choseeArea === undefined) {
                        return parent.layer.msg('请选择地区');
                    }
                    $('#address').val(choseeArea.regeocode.formattedAddress);
                    $('#latitude').val(choseeArea.lnglat.lat);
                    $('#longitude').val(choseeArea.lnglat.lng);
                    parent.layer.close(index);
                }
            });
        });

        $('.addHousingLabel').on('click', function() {
            var url = '{:url("propertyHousingLabelAdd")}';
            var index = parent.layer.open({title: '添加',type: 2,shade: 0.2, maxmin:true,area: ['500px', '400px'], content: url, btnAlign: 'c' , btn: ['确定', '取消'] , yes: function (index, layero) {
                    var iframeWindow = parent.window['layui-layer-iframe' + index] , submit = layero.find('iframe').contents().find("#submitBtn");
                    iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                        var field = data.field; //获取提交的字段
                        var loadAdd = parent.layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                        $.post(url, field, function (res) {
                            parent.layer.close(loadAdd);
                            if (res.code === 0) {
                                parent.layer.close(index); //关闭弹层
                                window.location.reload(); //刷新整个页面
                                parent.layer.msg(res.msg, {icon: 6, offset: '15px'});
                            } else {
                                parent.layer.msg(res.msg, {icon: 5, offset: '15px'});
                            }
                        });
                    });
                    submit.trigger('click');
                }
            });
        });

        form.on('checkbox(facilities)', function(data){
            let numInput = data.othis.parent().next().next().find('input');
            if(data.elem.checked) {
                if(numInput.val() <= 0) {
                    numInput.val(1)
                }
            } else {
                numInput.val(0)
            }
        });

    });
</script>
{/block}